<template>
  <a-modal
    :visible="visible"
    title="合同配置"
    @cancel="closeModal"
    :destroyOnClose="true"
    :footer="null"
    :width="600"
    :bodyStyle="{ height: '400px' }"
  >
    <div class="content">
      <div class="left">
        <div
          v-for="(item, index) in settingTypes"
          :class="activeKey === item.key ? 'active' : ''"
          :key="index"
          @click.stop="changeKey(item.key)"
          class="type-item"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="right">
        <!--  调整金审批   -->
        <template v-if="activeKey === 'refund'">
          开启
          <TextTip
            :tips="[
              `当开启租客退租，则自动会在该机构的审批应用中创建一个内置的”租客合同退租审批“，默认关闭`,
            ]"
          />
          <div class="mt-10">
            <a-switch
              :checkedValue="1"
              :unCheckedValue="0"
              v-model:checked="refundApprove"
              checked-children="开启"
              un-checked-children="关闭"
              @change="(val) => handleRefundApproveChange(val)"
            />
          </div>
        </template>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { message } from "ant-design-vue";
import {
  computed,
  defineComponent,
  reactive,
  ref,
  toRaw,
  toRefs,
  watch,
} from "vue";
import request from "@/common/utils/request";
import { TextTip } from "bl-common-vue3";
import store from "@/store";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "ContractDisposition",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: { TextTip },
  setup(props, context) {
    const $router = useRouter();
    const state = reactive({
      settingTypes: [
        {
          name: "租客退租",
          key: "refund",
        },
      ],
      activeKey: "refund",
      refundApprove: 0,
    });

    const changeKey = (key) => {
      state.activeKey = key;
    };

    const closeModal = () => {
      context.emit("closeModal");
    };

    const handleRefundApproveChange = (val) => {
      request
        .put("/org", "/contract/approvalSet", {
          type: "contract_retreat_approval",
          is_use: val,
        })
        .then((res) => {
          message.success(res.msg || "修改成功！");
          init();
        });
    };

    const init = () => {
      // 获取配置
      request.get("/org", "/contract/approvalGet", ).then((res) => {
        state.refundApprove =
          res?.config?.find((v) => v.type === "contract_retreat_approval")?.is_use || 0;
      });
    };

    const reset = () => {
      state.activeKey = "refund";
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );
    return {
      ...toRefs(state),
      closeModal,
      changeKey,
      handleRefundApproveChange,
    };
  },
});
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  .left {
    width: 126px;
    border-right: 1px solid #f0f0f0;
    padding-right: 16px;
  }
  .right {
    flex: 1;
    padding-left: 16px;
  }
}
.mt-10 {
  margin-top: 10px;
}
.type-item {
  width: 100%;
  margin-bottom: 16px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
}
.active {
  background-color: @primary-color;
  border-color: @primary-color;
  color: #fff;
}
</style>
